<template>
  <view class="convert">
    <view class="convert_title" :style="'padding-top:' + demoSize.top + 'px;' + 'height:' + demoSize.height + 'px;'">
      <view class="convert_title_nav">锦家育儿</view>
    </view>
    <view class="convert-wrap">
      <image class="convert-img" v-if="userStore.userInfo?.babySex == 0" src="/static/tabs/girl.png" mode="" />
      <image class="convert-img" v-else src="/static/tabs/boy.png" mode="" />
      <view class="convert-inner">
        <view class="name">{{ Coursedata?.indexTitle ? Coursedata?.indexTitle : 'Hello，宝宝家长' }}
        </view>
        <view class="text">{{ Coursedata?.indexSubTitle ? Coursedata?.indexSubTitle : '加入我们了解更多养娃小知识～' }}</view>
      </view>
    </view>
    <view class="convert-content">
      <image class="convert-content-banner" v-if="!Coursedata?.coverImg" src="/static/tabs/banner.png" mode="" />
      <image class="convert-content-banner" v-else :src="Coursedata?.coverImg" mode="" />
    </view>
    <view class="convert-qr" @click="maskflag = true">
      咨询老师
    </view>
    <view class="convert-mask" v-if="maskflag" @click="maskflag = false">
      <image src="/static/tabs/qrcode.png" />
    </view>
    <view class="convert-btn" @click="gocode">{{ Coursedata?.orderStatus == -1 ? '兑换码兑换' : '进入学习' }}</view>
    <view class="bg" :class="{ 'hidden': splashHidden }" @touchstart="handleTouchStart"
      @touchmove.prevent="handleTouchMove">
      <view class="bg-title">
        <view>跟着锦家走</view>
        <view>育儿更顺手</view>
      </view>
      <view class="bg-button">即将探索</view>
      <image class="bg-img" src="/static/tabs/xiahua.png"></image>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import { login, bigCourse } from '@/api/user'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const Coursedata = ref()
const maskflag = ref(false)
const demoSize = reactive({ //胶囊位置
  top: 0,
  height: 0
})
const splashHidden = ref(true)
const startY = ref(0);

onLoad(async () => {
  // 获取小程序右上角胶囊位置信息
  const demo = uni.getMenuButtonBoundingClientRect()
  demoSize.top = demo.top
  demoSize.height = demo.height
})
const getlogin = () => {
  wx.login({
    async success(res) {
      if (res.code) {
        //发起网络请求
        let logdata: any = await login({ code: res.code, courseGroup: 'weekAgeV2' })
        if (logdata.code == 0) {
          console.log(logdata, 'logdata');
          const result = { ...logdata.data }
          userStore.setUserInfo(result)
          if (logdata.data.babyId == -1) {
            if (uni.getStorageSync('splashHidden')) {
              uni.navigateTo({
                url: '/pages/infos/index'
              })
            }
          } else {
            getbigCourse(logdata.data.babyId)
          }
        }
      } else {
        console.log('登录失败！' + res.errMsg)
      }
    }
  })
}
onShow(() => {
  if (!uni.getStorageSync('splashHidden')) {
    wx.hideTabBar()
    splashHidden.value = false
  }
  if (!userStore.userInfo?.token) {
    getlogin()
  } else {
    getbigCourse(userStore.userInfo?.babyId)
  }
  // uni.navigateTo({
  //   url: '/pages/infos/index'
  // })
})
const handleTouchStart = (e) => {
  startY.value = e.touches[0].clientY;
};

const handleTouchMove = (e) => {
  const currentY = e.touches[0].clientY;
  const deltaY = startY.value - currentY;

  if (deltaY > 30) { // 上滑超过30px触发
    splashHidden.value = true;
    wx.showTabBar()
    uni.setStorageSync('splashHidden', true)
  }
};
const getbigCourse = async (id: any) => {
  let res: any = await bigCourse(id, 'weekAgeV2')
  if (res.code == 0) {
    Coursedata.value = res.data
  } else if (res.code == -2000) {
    userStore.userInfo = {}
    getlogin()
  }
}
const gocode = () => {
  if (userStore.userInfo?.babyId == -1) {
    uni.showModal({
      // title: '提示',
      content: '添加宝宝信息，才可以兑换学习课程哦~',
      confirmText: '去添加',
      success: function (res) {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/infos/index'
          })
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    });
  } else {
    if (Coursedata.value.orderStatus == 0) {
      uni.navigateTo({
        url: `/pages/redeemCode/index?coverImg=${Coursedata.value.coverImg}&title=${Coursedata.value.title}&id=${Coursedata.value.id}&price=${Coursedata.value.price}`
      })
    } else if (Coursedata.value.orderStatus == 1) {
      uni.navigateTo({
        url: `/pages/home/index?id=${Coursedata.value.id}`
      })
    } else {
      uni.showToast({
        title: '您的课程已到期，请与我们联系',
        duration: 2000,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #F8F8F8;
}

.convert {
  padding: 18rpx 34rpx 0rpx 34rpx;

  &_title {
    width: 100%;

    &_nav {
      left: 50%;
      transform: translateX(-50%);
      font-weight: 500;
      font-size: 34rpx;
      width: 136rpx;
      position: absolute;
    }
  }

  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-image: url('https://babycare-zjmf.oss-cn-beijing.aliyuncs.com/default/img/2025/06/21/aa1d5069314c24bee2f96f642c04ed94.png');
    transition: transform 0.3s ease-out;

    &-img {
      position: absolute;
      bottom: 226rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 32rpx;
      height: 32rpx;
    }

    &-button {
      width: 152rpx;
      height: 56rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #3A3A3A;
      text-align: center;
      line-height: 56rpx;
      position: absolute;
      bottom: 286rpx;
      left: 50%;
      transform: translateX(-50%);
    }

    &-title {
      width: 100%;
      position: absolute;
      bottom: 374rpx;

      view {
        width: 100%;
        text-align: center;
        font-weight: 600;
        font-size: 48rpx;
        color: #37B0FF;
      }
    }
  }

  .hidden {
    transform: translateY(-100%);
  }

  &-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .77);

    image {
      width: 396rpx;
      height: 448rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &-qr {
    text-align: center;
    width: 148rpx;
    height: 62rpx;
    line-height: 62rpx;
    position: fixed;
    right: 0rpx;
    bottom: 206rpx;
    border-radius: 31rpx 0 0 31rpx;
    color: #fff;
    background: #EE7651;
    font-size: 26rpx;
  }

  &-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 34rpx;
  }

  &-content {
    width: 100%;

    &-banner {
      width: 100%;
      border-radius: 16rpx;
    }
  }

  &-btn {
    margin: 0 auto;
    margin-top: 108rpx;
    width: 636rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #068FEB;
    border-radius: 44rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }

  &-img {
    width: 96rpx;
    height: 96rpx;
    margin-right: 14px;
    border-radius: 50%;
  }

  &-inner {
    .name {
      font-weight: 600;
      font-size: 36rpx;
      color: #2F2F2F;
    }

    .text {
      font-size: 26rpx;
      color: #2F2F2F;
    }
  }
}
</style>